<template>
    <div class="h-full flex flex-col bg-white">
        <div class="flex justify-between items-center p-4">
            <el-space>
                <el-select
                    v-model="currentMachine"
                    filterable
                    placeholder="查询指定考勤机记录"
                    @change="onChange"
                >
                    <el-option
                        v-for="(item, index) in machine"
                        :key="item.key"
                        :label="item.name"
                        :value="item.ip"
                    />
                </el-select>
                <el-button type="primary" @click="getList">刷新页面</el-button>

                <el-button
                    type="primary"
                    @click="ChangingAdministratorPassword()"
                    >管理员密码修改</el-button
                >
            </el-space>
        </div>
        <div class="flex-1 flex flex-col pl-4 pr-4"></div>
    </div>
</template>
<script setup>
/**
 * Vue3
 */
import { h, onMounted, reactive, ref, watchEffect } from 'vue'
/**
 * Vue图片
 */
import { InfoFilled, Search } from '@element-plus/icons-vue'

/**
 * 加载中
 */
const loading = ref(false)

/**
 * 获取设备
 */
const machine = JSON.parse(localStorage.getItem('machine'))
const currentMachine = ref(machine[0].ip)

/**
 * 当前指定的员工
 */
const employee = ref()
/**
 * 表头
 */
const tableHeader = [
    ['userName', '姓名'],
    [
        'base64ImagePath',
        '照片',
        (row, column, cellValue, index) =>
            h(ElAvatar, {
                shape: 'square',
                size: 80,
                fit: 'cover',
                style: 'background:transparent',
                src: `data:image/png;base64,${row.base64ImagePath}`
            })
    ],
    ['personInfoNo', '工号'],
    [
        'registerTime',
        '添加时间',
        (row, column, cellValue, index) => formatDate(cellValue)
    ]
]

/**
 * 分页
 */
const pagination = reactive({
    pageNumber: 1,
    articleNumber: 10,
    altogether: 0
})

/**
 *
 */
function getList() {}

/**
 *  管理员密码修改
 */
function ChangingAdministratorPassword() {}
</script>